<template>
	<view class="price_edit">
		<view class="list_box">
			<view class="flex flexjus">
				<view class="state_txt s26 familytow fblod">
					<block v-if="goods.is_prepay == 0">全款支付</block>
					<block v-if="goods.is_prepay == 1">定金支付</block>
				</view>
				<view class="state_zhifu s26 familytow fblod" v-if="goods.state == 1">待支付</view>
				<view class="state_zhifu s26 familytow fblod" v-if="goods.state == 2">待发货</view>
				<view class="state_zhifu s26 familytow fblod" style="color: #000000" v-if="goods.pay.pay_state == 1">已支付</view>
				<view class="state_zhifu s26 familytow fblod" v-if="goods.state == 6">已完成</view>
			</view>
			<view class="xdr_phone_box flex flexjus">
				<view class="xdr_txt s24 family f500">下单人/{{ goods.username }}</view>
				<view class="phone_txt s24 family f500">手机号/{{ goods.mobile }}</view>
			</view>
			<view class="goods_img_name_money flex" v-for="(item, index) in goods.goods" :key="index">
				<view class="goods_img">
					<image class="w100 h100" :src="item.image_src"></image>
				</view>
				<view class="goods_name s26 family f500">{{ goods.order_type == 'goods' ? item.difference : '' }} {{ item.title }}</view>
				<view class="goods_money_box">
					<view class="goods_money_top s24 f500 family">￥{{ goods.pay.actual_payment }}</view>
					<view class="goods_num s22 f500 family txtali">共{{ item.number }}件</view>
				</view>
			</view>
		</view>
		<view class="flex align-center" v-if="flag == 0">
			<input
				class="uni-input"
				type="digit"
				placeholder-class="s24 family f500"
				placeholder-style="color:#CCC;"
				v-model="priceIpt"
				:maxlength="moneyMaxLeng"
				placeholder="请输入修改后的价格"
			/>
			<view class="image">
				<image class="w100 h100" src="../static/ipt.png"></image>
			</view>
		</view>
		<block v-if="flag == 1">
			<view class="flex align-center">
				<input class="uni-input" type="text" placeholder-class="s24 family f500" placeholder-style="color:#CCC;" v-model="logistics" placeholder="请输入物流公司名称" />
				<view class="image">
					<image class="w100 h100" src="../static/ipt.png"></image>
				</view>
			</view>
			<view class="flex align-center">
				<input class="uni-input" type="text" placeholder-class="s24 family f500" placeholder-style="color:#CCC;" v-model="oddNumbers" placeholder="请输入快递单号" />
				<view class="image">
					<image class="w100 h100" src="../static/ipt.png"></image>
				</view>
			</view>
		</block>
		<view class="tishi s20 f500 family" v-if="flag == 0">
			<image class="tishi_image" src="../static/tishi.png"></image>
			只修改本次下单商品的价格
		</view>
		<view class="queren_btn s28 familytow fblod txtali" @click="goComplete(flag)">
			{{ flag == 0 ? '确认修改' : '确认发货' }}
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			priceIpt: '',
			moneyMaxLeng: 8,
			logistics: '',
			oddNumbers: '',
			goods: {},
			flag: null,
			type: 0 //0 购买发货  1 售后发货
		};
	},
	onLoad(options) {
		this.goods = uni.getStorageSync('goodsData');
		this.flag = this.goods.flag;
	},
	onReady() {
		uni.setNavigationBarTitle({
			title: this.goods.shopname
		});
	},
	watch: {
		priceIpt: {
			handler(newVal) {
				this.$nextTick(() => {
					let val = newVal.toString();
					val = val.replace(/[^\d.]/g, ''); //清除"数字"和"."以外的字符
					val = val.replace(/\.{2,}/g, '.'); //只保留第一个. 清除多余的
					val = val.replace(/^0+\./g, '0.');
					val = val.match(/^0+[1-9]+/) ? (val = val.replace(/^0+/g, '')) : val;
					val = val.match(/^\d*(\.?\d{0,2})/g)[0] || '';

					if (val.includes('.')) {
						let numDian = val.toString().split('.')[1].length;
						if (numDian === 2) {
							this.moneyMaxLeng = val.length;
						}
					} else {
						this.moneyMaxLeng = 8;
					}
					this.priceIpt = val;
				});
			}
		}
	},
	methods: {
		goComplete(flag) {
			if (flag == 0) {
				if (!this.priceIpt) {
					uni.showToast({
						title: '请输入价格',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				let reg = /^\d+(\.\d{1,2})?$/;
				if (!reg.test(this.priceIpt)) {
					uni.showToast({
						icon: 'none',
						title: '您输入的金额有误',
						duration: 2000
					});
					return;
				}
				this.$request({
					url: 'manage/changeMoney',
					method: 'POST',
					data: {
						order_id: this.goods.id,
						money: this.priceIpt
					}
				}).then((res) => {
					if (res.data.code == 1) {
						uni.showModal({
							title: '提示',
							content: '操作成功',
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									uni.navigateBack();
								}
							}
						});
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						});
					}
				});
			} else {
				if (this.type == 0) {
					//购买发货
					this.$request({
						url: 'manage/delivery',
						method: 'POST',
						data: {
							id: this.goods.id,
							express_name: this.logistics,
							express_no: this.oddNumbers
						}
					}).then((res) => {
						if (res.data.code == 1) {
							uni.navigateTo({
								url: './completeOrder?type=2'
							});
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'error'
							});
						}
					});
				} else if (this.type == 1) {
					//售后发货
					this.$request({
						url: 'manage/refund_address',
						method: 'POST',
						data: {
							id: this.goods.id,
							express_name: this.logistics,
							express_no: this.oddNumbers
						}
					}).then((res) => {
						if (res.data.code == 1) {
							uni.navigateTo({
								url: './completeOrder?type=2'
							});
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'error'
							});
						}
					});
				}
			}
		},
		//输入内容验证
		oninput(e) {
			this.$nextTick(() => {
				let val = e.target.value.toString();
				val = val.replace(/[^\d.]/g, ''); //清除"数字"和"."以外的字符
				val = val.replace(/\.{2,}/g, '.'); //只保留第一个. 清除多余的
				val = val.replace(/^0+\./g, '0.');
				val = val.match(/^0+[1-9]+/) ? (val = val.replace(/^0+/g, '')) : val;
				val = val.match(/^\d*(\.?\d{0,2})/g)[0] || '';

				if (val.includes('.')) {
					let numDian = val.toString().split('.')[1].length;
					if (numDian === 2) {
						this.moneyMaxLeng = val.length;
					}
				} else {
					this.moneyMaxLeng = 8;
				}
				this.priceIpt = val;
			});
		}
	}
};
</script>

<style scoped lang="scss">
.price_edit {
	overflow: hidden;

	.list_box {
		width: 686upx;
		background: #ffffff;
		margin-top: 20upx;
		padding: 32upx 32upx 32upx 32upx;

		.state_txt {
			color: #000000;
		}

		.state_zhifu {
			color: #ff3f4a;
		}

		.xdr_phone_box {
			width: 642upx;
			height: 36upx;
			background: #f4f5f9;
			border-radius: 8upx 8upx 8upx 8upx;
			padding: 12upx 22upx 12upx 22upx;
			margin-top: 24upx;

			.xdr_txt {
				color: #999999;
			}

			.phone_txt {
				color: #999999;
			}
		}

		.goods_img_name_money {
			margin-top: 40upx;

			.goods_img {
				width: 116upx;
				height: 116upx;
				border-radius: 8upx;
				overflow: hidden;
			}

			.goods_name {
				width: 356upx;
				height: 108upx;
				color: #333333;
				margin-left: 26upx;
				display: -webkit-box;
				overflow: hidden;
				white-space: normal;
				text-overflow: ellipsis;
				word-wrap: break-word;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
			}

			.goods_money_box {
				margin-top: 18upx;
				margin-left: 110upx;

				.goods_money_top {
					color: #000000;
				}

				.goods_num {
					color: #666666;
					margin-top: 10upx;
				}
			}
		}
	}

	.uni-input {
		width: 672upx;
		height: 88upx;
		background: #ffffff;
		margin-top: 20upx;
		padding-left: 78upx;
	}

	.image {
		width: 30upx;
		height: 30upx;
		position: absolute;
		left: 32upx;
	}

	.tishi {
		color: #999999;
		margin-top: 20upx;

		.tishi_image {
			width: 22upx;
			height: 22upx;
			vertical-align: middle;
			margin-right: 6upx;
			margin-left: 452upx;
		}
	}

	.queren_btn {
		width: 686upx;
		height: 88upx;
		background: #ebbe87;
		border-radius: 50upx;
		line-height: 88upx;
		color: #ffffff;
		position: fixed;
		left: 32upx;
		bottom: 68upx;
	}
}
</style>
<style>
page {
	background-color: #f4f5f9;
}
</style>
